<!--主要入口页面-->
<template>
  <f7-page ptr @ptr:refresh="refresh" tabs  :hide-navbar-on-scroll="false">

<!-- 备用   <f7-subnavbar :inner="false">
      <f7-button href="/citySelect/" style="width:34%">
        <f7-icon style="margin-left:-10px;" f7="placemark"></f7-icon>
        深圳
      </f7-button>
      <f7-searchbar
              search-container=".search-list"
              placeholder="搜索"
              search-in=".item-title"
              @focus="SearchReady"
      ></f7-searchbar>
    </f7-subnavbar>-->

    <f7-navbar>
      <!--<f7-subnavbar :inner="false">-->
      <f7-nav-left>
        <f7-button href="/citySelect/" iconF7="placemark" text="深圳深圳"></f7-button>
      </f7-nav-left>
        <f7-searchbar inline
                search-container=".search-list"
                placeholder="搜索"
                search-in=".item-title"
                @focus="SearchReady"
        ></f7-searchbar>
      <!--</f7-subnavbar>-->
    </f7-navbar>

    <f7-swiper style="height: 180px;" pagination :params="swiperParams">
      <f7-swiper-slide><img class="swiper-img" @click="onClick()" src="http://www.pptok.com/wp-content/uploads/2012/08/xunguang-4.jpg">
      </f7-swiper-slide>
      <f7-swiper-slide><img class="swiper-img" @click="onClick()" src="http://www.pptok.com/wp-content/uploads/2012/08/xunguang-4.jpg">
      </f7-swiper-slide>
      <f7-swiper-slide><img class="swiper-img" @click="onClick()"
                            src="http://img2.imgtn.bdimg.com/it/u=2097124721,3074829049&fm=26&gp=0.jpg">
      </f7-swiper-slide>
    </f7-swiper>

    <!--菜单导航开始-->
    <f7-row style="margin-top: 20px;">
      <f7-col>
        <div class="" style="text-align: center;">
          <f7-link href="/activity/actNearby/">
            <div>
              <div>
                <f7-icon size="32px" f7="chat"></f7-icon>
              </div>
              <span>附近聚会</span>
            </div>
          </f7-link>
        </div>
      </f7-col>

      <f7-col>
        <div class="" style="text-align: center;">
          <f7-link href="/member/memberNearby/">
            <div>
              <div>
                <f7-icon size="32px" f7="placemark"></f7-icon>
              </div>
              <span>附近人</span>
            </div>
          </f7-link>
        </div>
      </f7-col>

      <f7-col>
        <div class="" style="text-align: center;">
          <f7-link href="/activity/actTop/">
            <div>
              <div>
                <f7-icon size="32px" f7="fire"></f7-icon>
              </div>
              <span>人气聚会</span>
            </div>
          </f7-link>
        </div>
      </f7-col>

      <f7-col>
        <div class="" style="text-align: center;">
          <f7-link href="/user/fansList/">
            <div>
              <div>
                <f7-icon size="32px" f7="heart"></f7-icon>
              </div>
              <span>我关注的</span>
            </div>
          </f7-link>
        </div>
      </f7-col>
    </f7-row>

    <f7-row style="margin-top: 20px;">
      <f7-col>
        <div class="" style="text-align: center;">
          <f7-link href="/activity/actDrivingZone/">
            <div>
              <div>
                <f7-icon size="32px" f7="chat"></f7-icon>
              </div>
              <span>自驾游</span>
            </div>
          </f7-link>
        </div>
      </f7-col>


      <f7-col>
        <div class="" style="text-align: center;">
          <f7-link href="/activity/actAdd/">
            <div>
              <div>
                <f7-icon size="32px" f7="fire"></f7-icon>
              </div>
              <span>发起聚会</span>
            </div>
          </f7-link>
        </div>
      </f7-col>

      <f7-col>
        <div class="" style="text-align: center;">
          <f7-link href="/activity/actWeekend/">
            <div>
              <div>
                <f7-icon size="32px" f7="placemark"></f7-icon>
              </div>
              <span>周末聚</span>
            </div>
          </f7-link>
        </div>
      </f7-col>

      <f7-col>
        <div class="" style="text-align: center;">
          <f7-link href="/advertise/selectAd/">
            <div>
              <div>
                <f7-icon size="32px" f7="eye"></f7-icon>
              </div>
              <span>新功能</span>
            </div>
          </f7-link>
        </div>
      </f7-col>
    </f7-row>

    <!--会员推荐-->
    <f7-block-title style="font-size: 16px;margin-top: 20px;">WHO推荐</f7-block-title>
    <f7-swiper pagination :params="swiperMemberParams">
      <f7-swiper-slide v-for="(item, index1) in 3" :key="index1">

        <f7-row style="margin-top: 10px;" v-for="(item, index2) in 2" :key="index2">
          <f7-col style="width:33.33%" v-for="(item, index3) in 3" :key="index3">
            <div style="text-align: center;">
              <f7-link href="/member/memberView/">
                <div >
                  <div>
                    <img class="photo-img" src="https://cdn.framework7.io/placeholder/people-160x160-1.jpg" width="92%" />
                  </div>
                  <span>大卫david</span>
                </div>
              </f7-link>
            </div>
          </f7-col>


        </f7-row>

      </f7-swiper-slide>

    </f7-swiper>

    <f7-block-title style="font-size: 16px;margin-top: 20px;">WHERE推荐</f7-block-title>

    <template v-for="(item, indexPanl) in 5">
    <f7-card expandable>
      <f7-card-content :padding="false">
        <div class="bg-color-yellow" :style="{height: '300px'}">
          <f7-card-header text-color="black" class="display-block">
            Framework7
            <br/>
            <small :style="{opacity: 0.7}">Build Mobile Apps</small>
          </f7-card-header>
          <f7-link card-close color="black" class="card-opened-fade-in" :style="{position: 'absolute', right: '15px', top: '15px'}" icon-f7="close_round_fill"></f7-link>
        </div>
        <div class="card-content-padding">
          <p>Framework7 - is a free and open source HTML mobile framework to develop hybrid mobile apps or web apps with iOS or Android (Material) native look and feel...</p>
        </div>
      </f7-card-content>
    </f7-card>
    </template>

    <f7-card class="demo-facebook-card" v-for="(item, index) in 5" :key="index" >
      <f7-card-header class="no-border">
        <div class="demo-facebook-avatar"><img src="https://cdn.framework7.io/placeholder/people-68x68-1.jpg" width="34"
                                               height="34"/></div>
        <div class="demo-facebook-name">david大卫</div>
        <div class="demo-facebook-date">时间：2019-03-26 19:00</div>
      </f7-card-header>

      <f7-card-content >
        <p>2019年5月1号自驾游东莞！2019年5月1号自驾游东莞！2019年5月1号自驾游东莞！</p>
        <img src="https://cdn.framework7.io/placeholder/nature-1000x700-8.jpg"
                                                       width="100%"/>
        <p class="likes">已报名：59人</p>
      </f7-card-content>
      <f7-card-footer class="no-border">
        <f7-button>收藏</f7-button>
        <f7-button href="/activity/actDetail/">去报名</f7-button>
        <!--<f7-link>分享</f7-link>-->
      </f7-card-footer>
    </f7-card>


    <!--<footerTabbar></footerTabbar>-->

  </f7-page>
</template>
<script>
  import routes from '../routes.js'
  import searchNav from '../components/searchNav.vue';
  import footerTabbar from '../components/footerTabbar.vue';

  export default {
    components: {footerTabbar, searchNav},
    data() {
      return {
        // Framework7 parameters here
        f7params: {
          // App routes
          routes: routes,
        },
        swiperParams: {
          // speed: 500,
          loop: true,
          // height:600,
          autoplay: {
            delay: 1500,
          },
          // preventLinksPropagation: false   // 阻止点击事件冒泡
        },
        swiperMemberParams: {
          // speed: 500,
          pagination: {
            // el: '.swiper-pagination',
            // type: 'progress',
          },
          loop: true,
          // height:600,
          autoplay: {
            delay: 9992000,
          },
          // preventLinksPropagation: false   // 阻止点击事件冒泡
        },

      };
    },
    methods: {
      refresh(event, done) {
        setTimeout(() => {
          // todo
          done();
        }, 1000);
      },
      SearchReady(){
        console.info("search");
        this.$f7router.navigate(`/SearchReady/`);
      }

    }
  }
</script>
<style scoped>
  .swiper-img {
    width: 100%;
    /*border: 2px solid white;*/
  }
  .photo-img {
    border: 2px solid #f4f5f5;
  }
</style>
